<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
</head>

<body onload="load()">
  <div id="x-spreadsheet-demo">
  </div>

  <script>
    function load() {
      const rows10 = { len: 1000 };
      for (let i = 0; i < 1000; i += 1) {
        rows10[i] = {
          cells: {
            0: { text: 'A-' + i },
            1: { text: 'B-' + i },
            2: { text: 'C-' + i },
            3: { text: 'D-' + i },
            4: { text: 'E-' + i },
            5: { text: 'F-' + i },
          }
        };
      }
      const rows = {
        len: 80,
        1: {
          cells: {
            0: { text: 'testingtesttestetst' },
            2: { text: 'testing' },
          },
        },
        2: {
          cells: {
            0: { text: 'render', style: 0 },
            1: { text: 'Hello' },
            2: { text: 'haha', merge: [1, 1] },
          }
        },
        8: {
          cells: {
            8: { text: 'border test', style: 0 },
          }
        }
      };
      const options = {
        "uploadUrl": "/design/report/upload", //统一上传地址
        "uploadExcelUrl": "/design/report/importExcel",//上传excel方法
        "viewLocalImage": "/design/report/img",//预览本地图片方法,//预览本地图片方法
        pageSize: [10, 20, 30], //分页条数
        domain: "",
        showToolbar: true,     //头部操作按钮
        showGrid: true,        //excel表格
        showContextmenu: true, //右键操作按钮
        view: {
          height: () => document.documentElement.clientHeight,
          width: () => document.documentElement.clientWidth,
        },
        row: {
          len: 100,
          height: 25,
          minRowResizerHeight: 1 //拖拽行最小高度
        },
        col: {
          len: 26,
          width: 100,
          minWidth: 60,
          height: 0,
          minColResizerHeight: 1//拖拽列最小高度
        },
        style: {
          bgcolor: '#ffffff',
          align: 'left',
          valign: 'middle',
          textwrap: false,
          strike: false,
          underline: false,
          color: '#0a0a0a',
          font: {
            name: 'Helvetica',
            size: 10,
            bold: false,
            italic: false,
          },
        },
      };
      var xs = x_spreadsheet('#x-spreadsheet-demo', options)
        .loadData([{
          freeze: 'B3',
          styles: [{}],
          merges: [
          ],
          cols: {
            len: 18,
          },
          rows,
        }]).change((cdata) => {
          // console.log(cdata); 
          // const dataRect = xs.data.getDataRect();
        });
      xs.on('printSettings', function () {
        // 这里书写自己的导出方法即可. 
        console.log("sdsdsdsd")
      });
      xs.on('generateQrcode', function (cell) {
        console.log("1111111111")
        // 生成二维码. 
        var qrCodeForm = {
          type: "QRCode",
          text: 'https://www.baidu.com',
          width: 125,
          height: 125,
          colorDark: "#333333", //二维码颜色
          colorLight: "#ffffff", //二维码背景色
          currentSrc: "",
          ri: 1,
          ci: 1
        };
        xs.cellText(qrCodeForm.ri, qrCodeForm.ci, qrCodeForm).reRender()
      });
      xs.on('generateBarcode', function (cell) {
        console.log("aaaaaaaaaaa")
      })
      xs.on('insertImg', function () {
        // 生成二维码.  
      });
    }
  </script>
  <!--script type="text/javascript" src="https://unpkg.com/x-data-spreadsheet@1.0.20/dist/locale/zh-cn.js"></script-->
  <!-- <script src="./dist/xspreadsheet.js"></script> -->
</body>

</html>